<script setup lang="ts">
import { LoginForm, RegisterForm } from './components'
// import { ThemeSwitch } from '@/components/ThemeSwitch'
// import { LocaleDropdown } from '@/components/LocaleDropdown'
// import { useI18n } from '@/hooks/web/useI18n'
// import { getCssVar, underlineToHump } from '@/utils'
// import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { ref } from 'vue'
import { ElScrollbar } from 'element-plus'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('login')

// const appStore = useAppStore()

// const { t } = useI18n()

const isLogin = ref(true)

// const toRegister = () => {
//   isLogin.value = false
// }

// const toLogin = () => {
//   isLogin.value = true
// }

// const themeChange = () => {
//   const color = getCssVar('--el-bg-color')
//   appStore.setMenuTheme(color)
//   appStore.setHeaderTheme(color)
// }
</script>

<template>
  <div>
    <div
      :class="prefixCls"
      class="h-[100%] w-[100%] relative lt-xl:bg-[var(--login-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
    >
      <ElScrollbar class="h-full leftbg">
        <div class="relative flex mx-auto min-h-100vh dark:bg-[var(--login-bg-color)]">
          <div
            :class="`${prefixCls}__left  flex-1  relative  lt-xl:hidden`"
            class="flex justify-center items-center"
            style="background-color: #040744; justify-content: center"
          >
            <TransitionGroup
              appear
              tag="div"
              enter-active-class="animate__animated animate__bounceInLeft"
              style="display: flex"
            >
              <img
                src="@/assets/imgs/earth.svg"
                key="1"
                style="width: 60%; height: 60%; margin: 0 auto"
              />
            </TransitionGroup>
          </div>
          <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
            <div
              class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
            >
              <div class="flex items-center at-2xl:hidden at-xl:hidden">
                <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
                <span class="text-20px font-bold"></span>
              </div>
            </div>
            <Transition appear enter-active-class="animate__animated animate__bounceInRight">
              <div
                class="h-auto flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
                style="margin-top: 20vh"
              >
                <LoginForm
                  v-if="isLogin"
                  class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
                />
              </div>
            </Transition>
          </div>
        </div>
      </ElScrollbar>
    </div>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';
.leftbg {
  background-color: var(--login-bg-color);
}
.bgnew {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/earth_bg.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.@{prefix-cls} {
  overflow: auto;
  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      // background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
      // background: #fff;
    }
  }
}
</style>
